Incorporer du javascript sur vos sites web.

1) Création d’un fichier js

Pour commencer, vous allez créer un fichier, nomé le script.js à la racine de votre dossier web. Dans votre fichier .html écrivez ceci:

<!Doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!-- La ligne en dessous vous permet de charger
votre fichier .js-->
<script src="script.js"></script>
</head>
<body>
</body>
</html>

Voilà maintenant votre fichier js va être charger en même temps que votre page html.

2) Un peu de javascript

Pour commencer, on va créer un tableau basique sur notre fichier html pour structurer notre petite fonction de calculer un carré.

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="script.js"></script>
  </head>
  <body>
    <table border="1" style="text-align:center">
      <tr>
        <th colspan="2">Calculer le carré</th>
      </tr>
      <tr>
        <td>  Nombre : </td>
        <td><input type="text" id="nombres" style="width:60px" /></td>
      </tr>
      <tr>
        <td colspan="2"><button type="button" 
        onclick="calculCarre();" name="button">Et</button></td>
      </tr>
      <tr>
        <td colspan="2"><div id="result"></div></td>
      </tr>
    </table>
  </body>
</html>

Vous devriez avoir ce résultat sur votre page web:

Calculer le carré
Nombre :

Petite explication, dans le tableau on a le titre entre les balise th, ensuite vous avez un input pour écrire un nombre,en dessous le bouton pour lancer la fonction calculCarre() et enfin on à une div pour affficher le résultat.

Maintenant, on va ouvrir notre fichier script.js et on va écrire ce petit bout de code:

function calculCarre(){
// on récupère le nombre écrit dans l input
 $nombre = document.getElementById('nombres').value;
// on fait le calcul
$result = $nombre * $nombre;
//on affiche le resultat dans la div
document.getElementById('result').innerHTML = $result;
}

Voilà une toute petite fonction pour comprendre le fonctionnement et l’implentation d’un script javascript sur une page web.Les possibilitées sont immensent et pour apprendre rien de mieux que de chercher et tester par soi même.

Voilà j’espère vous avoir aidé à comprendre la mise en place d’un fichier javascript et le fonctionnement d’un script.

Merci d’avoir suivi cet article jusqu’au bout et je vous dis à bientôt pour un prochain article.

BYE

Retour